// 基于准备好的dom，初始化echarts实例
var xdleftChart2 = echarts.init(document.getElementById('left_chart2'),'macarons');
var option = {
    //title: {
    //    //text: '折线图堆叠'
    //},
    tooltip: {
        trigger: 'axis',
        //borderColor:"#ccc"
    },

    color:['#fd7000','#fd68ff','#feff54','#24fffc'],
    legend: [

        {

            x:'center',
            top:'1%',
            itemGap: 30,
            data:['13米','9米','6.2米','多波束'],
            textStyle:{
                color:'#fff',
                fontSize:40
            }
        }
        // {
        //     x:'center',
        //     top:'6%',
        //     itemGap: 30,
        //     data:['XXXXB3A','XXXXB3A2'],
        //     textStyle:{
        //         color:'#fff',
        //         fontSize:30
        //     }
        // }

    ],
    grid: {
        left: '50',
        right: '80',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018/01','2018/02','2018/03','2018/04','2018/05','2018/06','2018/07'],
        axisLabel:{
            show:true,
            textStyle: {
                color: '#fff',
                fontSize:40
            }

        },
        axisLine:{
            lineStyle:{
                color: '#56f0ed',
                width:5
            }
        }

    },
    yAxis: {
        name:'(%)',
        type: 'value',
        nameTextStyle:{
            color:"#fff",
            fontSize:40
        },
        min:0,
        max:100,
        interval:10,
        show: true,
        splitLine:{
            show:false,
        },
        axisLabel: {
            show: true,
            // interval: 'auto',
            textStyle: {
                color: '#fff',
                fontSize:40
            }
        },
        axisLine:{
            lineStyle:{
                color: '#56f0ed',
                width:5

            }
        }
    },
    series: [
        {
            name:'13米',
            type:'line',
            symbol: 'circle',
            symbolSize: 20,
            smooth:false,
            lineStyle: {
                width:10// 0.1的线条是非常细的了
            },
            // itemStyle: {
            //     normal: {//#7272fc','#e56cf0','#e9f888','#fc4268
            //         //color:'transparent',
            //         //borderColor:'#7272fc',
            //         borderWidth:20,
            //         lineStyle: {
            //             //color:'#7272fc',
            //             width:10// 0.1的线条是非常细的了
            //         }
            //     }
            // },

            //stack: '总量',
            data:[55, 65, 60, 70, 85, 60, 80, 75,85]
        },
        {
            name:'9米',
            type:'line',
            symbol: 'circle',
            symbolSize: 20,
            smooth:false,
            lineStyle: {
                width:10// 0.1的线条是非常细的了
            },
            // itemStyle: {
            //     normal: {
            //         //color:'transparent',
            //         //borderColor:'#e56cf0',
            //         borderWidth:20,
            //         lineStyle: {
            //             //color:'#e56cf0',
            //             width:10// 0.1的线条是非常细的了
            //         }
            //     }
            // },
            //stack: '总量',
            data:[30, 40, 38, 50, 60, 50, 60, 55, 70]
        },
        {
            name:'6.2米',
            type:'line',
            symbol: 'circle',
            symbolSize: 20,
            smooth:false,
            lineStyle: {
                width:10// 0.1的线条是非常细的了
            },
            // itemStyle: {
            //     normal: {
            //         //color:'transparent',
            //         //borderColor:'#e9f888',
            //         borderWidth:20,
            //         lineStyle: {
            //             //color:'#e9f888',
            //             width:10// 0.1的线条是非常细的了
            //         }
            //     }
            // },
            //stack: '总量',
            data:[20, 30, 25, 40, 45, 30, 45, 48, 50]
        },
        {
            name:'多波束',
            type:'line',
            symbol: 'circle',
            symbolSize: 20,
            smooth:false,
            lineStyle: {
                width:10// 0.1的线条是非常细的了
            },
            // itemStyle: {
            //     normal: {
            //         //color:'transparent',
            //         //borderColor:'#fc4268',
            //         borderWidth:20,
            //         lineStyle: {
            //             //color:'#fc4268',
            //             width:10// 0.1的线条是非常细的了
            //         }
            //     }
            // },
            //stack: '总量',
            data:[10, 18, 15, 20, 25, 10, 25, 24, 30]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
xdleftChart2.setOption(option);
setInterval(function() {
    var op = xdleftChart2.getOption();
    var data0 = op.series[0].data;
    var data1 = op.series[1].data;
    var data2 = op.series[2].data;
    var data3 = op.series[3].data;

    op.series[0].data.push(data0.shift());
    op.series[1].data.push(data1.shift());
    op.series[2].data.push(data2.shift());
    op.series[3].data.push(data3.shift());

    //op.series[1].data.push(data1);
    //op.series[2].data.push(data2);

    //i+=4;
    //op.xAxis[0].data.shift();
    xdleftChart2.setOption(op);
}, 5000);